<template>

  <!-- 显示加载 -->
  <LoadingCmp :loading="loading" v-if="loading" />



  <div class="movie-detail" :style="{ 'background-color': backgroundColor }">
    <div class="nav">
      <a href="/">猫眼电影</a><van-icon name="arrow" /> {{ movieInfo.movieName }}
    </div>


    <MovieDescCmp :movieInfo="movieInfo" />

    <MovieScoreCmp :movieScore="movieScore" />

    <MovieBriefCmp :backgroundColor="backgroundColor" :movieBrief="movieBrief" />

    <MovieActorsCmp :movieActors="movieActors" :movieDetailPage="movieDetailPage" />

    <MovieClipCmp :movieClipList="movieClipList" />

    <MovieGalleryCmp :movieGallery="movieGallery" />
  </div>

  <MovieCommentCmp :movieShortComments="movieShortComments" />

  <MovieQuestionCmp :movieQuestions="movieQuestions" />


  <MovieReviewCmp :movieReviews="movieReviews" />

  <MovieMaterialsCmp :movieMaterilas="movieMaterilas" />

  <MovieSoundtrackCmp :movieSoundtrack="movieSoundtrack" />

  <MovieBoxOfficeCmp :movieBoxOffice="movieBoxOffice" />

  <MovieNewsListCmp :movieRelatedNews="movieRelatedNews" />

  <MovieRelatedMovieCmp :movieRelatedMovies="movieRelatedMovies" />
  <!--
  <footer>
    <div class="bottom-logo">
      <img :src="bottomLogo" alt="bottom-logo" class="logo">
    </div>
  </footer> -->
  <FooterCmp />

  <ShareCmp :onSale="onSale" :guideToWish="guideToWish" />


</template>


<script setup>

import { getCurrentYear, getCurrentMonth } from '@/tools/index.js'

import MovieDescCmp from '@/components/movie_cinema/movie/MovieDescCmp.vue'
import MovieScoreCmp from '@/components/movie_cinema/movie/MovieScoreCmp.vue'
import MovieBriefCmp from '@/components/movie_cinema/movie/MovieBriefCmp.vue'
import MovieActorsCmp from '@/components/movie_cinema/movie/MovieActorsCmp.vue'
import MovieClipCmp from '@/components/movie_cinema/movie/MovieClipCmp.vue'
import MovieCommentCmp from '@/components/movie_cinema/movie/MovieCommentCmp.vue'
import MovieBoxOfficeCmp from '@/components/movie_cinema/movie/MovieBoxOfficeCmp.vue'
import MovieNewsListCmp from '@/components/movie_cinema/movie/MovieNewsListCmp.vue'
// import bottomLogo from "@/assets/bottom-logo.png"

import { fetchMovieDetail } from '@/api/index.js'
import { ref, onMounted, reactive, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

import { useStore } from "@/stores/index.js"
const store = useStore()


const themeVars = reactive({
  overlayBackground: '#fff'
});


const props = defineProps({
  movieId: {
    type: Number,
  }
})

// 页面背景色
const backgroundColor = ref("#fff");

// 电影综合信息
const movieInfo = reactive({
  id: 0,
  nm: '',
  img: '',
  movieName: '',
  englishName: '',
  category: '',
  actors: [],
  pubDesc: '',
  duration: '',

})

// 得分
const movieScore = reactive({
  scoreLabel: '',
  score: 0,
  year: getCurrentYear(),
  term: getCurrentMonth(),
  movieRank: 0,
  secondWord: '',
  imDb: 0,
  watched: 0,
  wish: 0,
})

// 简介
const movieBrief = ref('')

// 演职人员
const movieActors = ref([])

// 视频
const movieClipList = ref([])

// 剧照
const movieGallery = reactive({
  photos: [],
  pn: 0,
})

// 短评
const movieShortComments = reactive({
  shortComments: [],
  total: 0,
})

// 讨论
const movieQuestions = reactive({
  questions: [],
  total: 0,
})

// 长评论
const movieReviews = reactive({
  reviews: [],
  total: 0,
})

//影片资料
const movieMaterilas = ref([])

// 电影原声
const movieSoundtrack = reactive({
  musicName: '',
  musicNum: 0,
  musicStar: '',

})

//票房
const movieBoxOffice = reactive({
  firstWeekBox: 0,
  sumBox: 0,
  lastDayRank: 0
})

// 相关快讯
const movieRelatedNews = ref([])

// 相关影片
const movieRelatedMovies = ref([])

// 是否在售
const onSale = ref(true)

//标记想看
const guideToWish = ref(true)

const loading = ref(true)

const movieDetailPage = reactive({
  backgroundColor,
  movieInfo,
  movieScore,
  movieBrief,
  movieActors,
  movieClipList,
  movieGallery,
  movieShortComments,
  movieQuestions,
  movieReviews,
  movieMaterilas,
  movieSoundtrack,
  movieBoxOffice,
  movieRelatedNews,
  movieRelatedMovies,
  onSale,
  guideToWish

})

const movieId = computed(() => {

  // 如果 props 中有 movieId 则使用 props 中的 movieId，否则使用路由中的 movieId
  return props.movieId || route.params.movieId

})

const getMovieDetail = async (movieId, cityId) => {
  loading.value = true
  const response = await fetchMovieDetail(movieId, cityId)
  // console.log("fetchMovieDetail", response);
  backgroundColor.value = response.movie.backgroundColor + '!important'  //页面背景色
  // MovieDescCmp 组件的 props 传值
  movieInfo.id = response.movie?.id || 0
  movieInfo.nm = response.movie?.nm || ''
  movieInfo.img = response.movie?.img || ''
  movieInfo.movieName = response.movie?.nm || ''
  movieInfo.englishName = response.movie?.enm || ''
  movieInfo.category = response.movie?.cat || ''
  movieInfo.actors = response.movie?.star || []
  movieInfo.pubDesc = response.movie?.pubDesc || ''
  movieInfo.duration = response.movie?.dur || ''
  // movieInfo.wish = response.movie.wish
  // movieInfo.watched = response.movie.watched

  // 得分 MovieScoreCmp 组件的 props 传值
  movieScore.scoreLabel = response.movie?.scoreLabel || ''
  movieScore.score = response.movie?.sc || 0
  movieScore.year = response.reputation?.year || getCurrentYear()
  movieScore.term = response.reputation?.term || getCurrentMonth()
  movieScore.movieRank = response.reputation?.movieRank || 0
  movieScore.secondWord = response.reputation?.secondWord || ''
  movieScore.imDb = response.movie?.imdbScore || 0
  movieScore.wish = response.movie?.wish || 0
  movieScore.watched = response.movie?.watched || 0

  // 简介 MovieBriefCmp 组件的 props 传值
  movieBrief.value = response.movie?.dra || ''

  // 演职人员 MovieActorsCmp 组件的 props 传值
  movieActors.value = response?.celebrities || []

  // 视频 MovieClipCmp 组件的 props 传值
  movieClipList.value = response.feedVideos?.feeds || []
  // 剧照 MovieGalleryCmp 组件的 props 传值
  movieGallery.photos = response.movie?.photos || []
  movieGallery.pn = response.movie?.pn || 0
  // 短评 MovieCommentCmp 组件的 props 传值
  movieShortComments.shortComments = response.comments?.hotComments || []
  movieShortComments.total = response.comments?.total || 0

  // 讨论 MovieQuestionCmp 组件的 props 传值
  movieQuestions.questions = response.questions?.questions || []//讨论 包含问question和答answer
  movieQuestions.total = response.questions?.total || 0 // 讨论数量

  // 长评论 MovieReviewCmp 组件的 props 传值
  movieReviews.reviews = response.filmReviews?.filmReviews || []// //长评论 包含评论内容和评论者信息 .author
  movieReviews.total = response.filmReviews?.total || 0 // 长评论数量

  //影片资料
  movieMaterilas.value = response?.features || [] //影片资料

  // 电影原声 MovieSoundtrackCmp 组件的 props 传值
  movieSoundtrack.musicName = response.movie?.musicName || ''
  movieSoundtrack.musicNum = response.movie?.musicNum || 0
  movieSoundtrack.musicStar = response.movie?.musicStar || ''

  //票房 MovieBoxOfficeCmp 组件的 props 传值
  movieBoxOffice.firstWeekBox = response.mbox?.mbox?.firstWeekBox || 0
  movieBoxOffice.sumBox = response.mbox?.mbox?.sumBox || 0
  movieBoxOffice.lastDayRank = response.mbox?.mbox?.lastDayRank || 0

  // 相关快讯 MovieRelatedNewsCmp 组件的 props 传值
  movieRelatedNews.value = response.newsList?.newsList || []//相关快讯

  // 相关影片 MovieRelatedMovieCmp 组件的 props 传值
  movieRelatedMovies.value = response?.relatedMovies || []//相关影片

  // 是否在售
  onSale.value = response.movie?.onSale

  // 标记想看
  guideToWish.value = response.movie?.guideToWish

  store.setMovieDetailPage(movieDetailPage)
  loading.value = false
}



onMounted(async () => {
  await getMovieDetail(movieId.value, store.currentCity.id)
});



watch(movieId, async (newVal) => {
  await getMovieDetail(newVal, store.currentCity.id)

})





</script>












<style scoped>
:deep(.overlay) {
  background-color: #fff;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




.movie-detail {
  padding: 10px;
}


.nav {
  color: #ccc;
  font-size: 14px;


}

.nav a {
  color: #ccc;
  font-size: 14px;
  text-decoration-color: none;
}

/* footer {
  margin: 10px 0 50px 0;
}

.bottom-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  overflow: hidden;
}

.bottom-logo .logo {
  height: 20px;
} */
</style>
